<template>
  <div class="data-info home-section">
    <div class="tab-item home-title">数据集</div>
    <div class="tabs">
      <span
          v-for="tab in tabList"
          :key="tab.value"
          class="tabs-item"
          :class="{ 'is-active': tab.value === active }"
          @click="activeClick(tab.value)"
      >
        {{ tab.label }}
      </span>
    </div>
    <div class="grid-cards">
      <div
          v-for="(card, index) in currList"
          :key="card.id"
          class="card"
          :style="{ 'grid-area': `item${index + 1}` }"
      >
        <div class="card-top">
          <span class="card-title">{{ card.elementTitle }}</span>
          <router-link
              :to="`/model/square/detail?id=${card.id}`"
              target="_blank"
          >
            <img
                src="@/assets/gradient-arrow.svg"
                class="cursor-pointer"
                alt=""
            />
          </router-link>
        </div>
        <p
            class="card-content"
            :style="{ '-webkit-line-clamp': index < 3 ? 5 : 3 }"
            v-html="card.remark"
        ></p>
      </div>
    </div>
    <More path="/dataSource" />
  </div>
</template>


<script setup>
import { ref, computed, watch, inject } from "vue";
import { useDict } from "@/hooks";
import { DICT_MAP } from "@/const";
import More from "@/views/index/components/more.vue";

const active = ref("");
const activeClick = (value) => {
  active.value = value;
};

const { list: domainList } = useDict(DICT_MAP.element_domain);
const tabList = computed(() => domainList.value.slice(0, 4));

watch(
    () => tabList.value,
    (val) => {
      if (val.length) active.value = tabList.value[0].value;
    },
    {
      immediate: true,
    }
);

const list = ref({});
const currList = computed(() => list.value[active.value] || []);
const $api = inject("$api");
const getData = async (elementDomain) => {
  if (list.value?.[elementDomain]?.length) return;
  const { data: rows } = await $api.provide.getCustomerList({
    pageNum: 1,
    pageSize: 5,
    elementDomain,
    elementShareType: 1,
    elementType: 1,
    status: 1,
  });
  list.value[elementDomain] = rows;
};

watch(
    () => active.value,
    (val) => {
      getData(val);
    }
);
</script>

<style lang="less" scoped>
.data-info {
  padding: 34px 0 60px;
  background: url("/data-bg.png") no-repeat center;
  background-size: cover;

  .home-title {
    margin-bottom: 24px;
  }

  .tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;

    .tabs-item {
      font-size: 18px;
      line-height: 26px;
      color: @text-light;
      margin-right: 54px;
      cursor: pointer;

      &:last-child {
        margin: 0;
      }

      &.is-active {
        color: @text-default;
        font-weight: 600;
      }
    }
  }

  .grid-cards {
    display: grid;
    width: 95%;
    gap: 16px;
    margin: 40px 0;
    grid-template-areas:
      "item1 item1 item2 item2 item3 item3"
      "item4 item4 item4 item5 item5 item5";

    .card {
      box-sizing: border-box;
      padding: 20px;
      background: #fff;
      box-shadow: 0px -4px 18px 0px rgba(0, 0, 0, 0.1);

      &-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .card-title {
          font-size: 20px;
          font-weight: 500;
          color: @text-default;
          flex: 1;
          margin-right: 20px;
          .single-overflow;
        }

        img {
          width: 14px;
          height: 14px;
        }
      }

      &-content {
        margin-top: 24px;
        font-size: 14px;
        color: @text-light!important;
        line-height: 27px;
        :deep(p span) {
          color: inherit !important;
        }
        .multiline-overflow(3);
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .grid-cards {
    grid-template-areas:
      "item1 item1 item2 item2"
      "item3 item3 item4 item4"
      "item5 item5 item5 item5";

    .card {
      padding: 16px;
      .card-top {
        .card-title {
          font-size: 18px;
          margin-right: 16px;
        }
        img {
          width: 12px;
          height: 12px;
        }
      }
      .card-content {
        font-size: 13px;
        line-height: 24px;
      }
    }
  }
}

@media screen and (max-width: 768px) {

  .data-info {
    padding: 20px 0 40px;
    .home-title {
      font-size: 24px;
      margin-bottom: 20px;
    }
    .tabs {
      margin-bottom: 24px;
      .tabs-item {
        font-size: 14px;
        margin-right: 24px;
      }
    }
    .grid-cards {
      display: block;
      width: 100%;
      grid-template-areas:
      "item1 item1"
      "item2 item2"
      "item3 item3"
      "item4 item4"
      "item5 item5";

      .card {

        padding: 12px;
        margin: 10px ;
        .card-top {
          .card-title {
            font-size: 16px;
            margin-right: 12px;
          }
          img {
            width: 10px;
            height: 10px;
          }
        }
        .card-content {
          font-size: 12px;
          line-height: 20px;
        }
      }
    }
  }


}
</style>
